定制 |
您所在的位置：网站首页 › vuetify 模板 › 定制 |
定制
|
主题主题生成器浅色和深色自定义自定义主题变量禁用主题选项压缩缓存自定义属性CSP Nonce主题 Provider用例主题 轻松更改你的应用程序的颜色。重建默认样式表，并根据你的特定需求自定义框架的各个方面。 主题生成器使用我们的 Theme Generator 工具为你的 Vuetify 应用程序发现和生成新的颜色主题。 浅色和深色Vuetify 同时支持 Material Design spec 中的 light 和 dark 变量。这个指定从根组件的 v-app 开始，大多数组件都支持它。默认情况下，你的应用程序将会使用 light 主题，但是你也可以轻松的在主题服务中使用 dark 选项来改变它。 // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'Vue.use(Vuetify)export default new Vuetify({ theme: { dark: true, },})当你指定一个组件为浅色或暗色时，除非另有指定，所有子组件将继承并应用同样的组件。 你可以手动打开 dark 开关，方法是将 this.$vuetify.theme.dark 更改为 true 或 false 。 自定义默认情况下，Vuetify 具有适用于所有组件的标准主题。 { primary: '#1976D2', secondary: '#424242', accent: '#82B1FF', error: '#FF5252', info: '#2196F3', success: '#4CAF50', warning: '#FFC107',}这可以很容易地改变。只需传递一个 主题 属性给 Vuetify 构造函数即可。你可以选择修改所有或只修改部分主题属性，其余的属性则继承自默认的主题属性。 // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'const vuetify = new Vuetify({ theme: { themes: { light: { primary: '#3f51b5', secondary: '#b0bec5', accent: '#8c9eff', error: '#b71c1c', }, }, },})你也可以使用预定义的 material 色彩。 // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'import colors from 'vuetify/lib/util/colors'const vuetify = new Vuetify({ theme: { themes: { light: { primary: colors.purple, secondary: colors.grey.darken1, accent: colors.shades.black, error: colors.red.accent3, }, dark: { primary: colors.blue.lighten3, }, }, },})默认情况下，主题服务将使用你应用程序的主颜色为 anchor 标签。 你可以通过向主题 anchor 属性来覆盖它： // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'Vue.use(Vuetify)const vuetify = new Vuetify({ theme: { themes: { light: { primary: '#3f51b5', secondary: '#b0bec5', anchor: '#8c9eff', }, }, },})export default vuetify深入原理，Vuetify 将会根据这些可以在 DOM 中访问的值生成 CSS 类。这些类将遵循与其他助手类相同的标记，例如 primary 或者 secondary--text。如果提供整个颜色对象（如上述 colors.purple 中的颜色），则 lighten/darken 变量将立即使用来代替生成。 这些值会在 theme 属性下的 $vuetify 对象示例中可用。这可以让你动态地修改你的主题，Vuetify 将在后台重新生成并更新你的主题类，无缝更新你的应用程序。 // Light themethis.$vuetify.theme.themes.light.primary = '#4caf50'// Dark themethis.$vuetify.theme.themes.dark.primary = '#4caf50'自定义主题变量虽然 Vuetify 会自动生成主题颜色的 lighten 和 darken 变量，但你可能想要自己控制这个东西。 只需传递一个包含你想要修改的变量的主题对象。不需要提供任何东西就为你生成。 // src/plugins/vuetify/theme.jsimport colors from 'vuetify/lib/util/colors'export default { primary: { base: colors.purple.base, darken1: colors.purple.darken2, }, secondary: colors.indigo, // All keys will generate theme styles, // Here we add a custom `tertiary` color tertiary: colors.pink.base,}你现在可以导入你的自定义主题对象并将其应用到 Vuetify // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'import light from './theme'Vue.use(Vuetify)export default new Vuetify({ theme: { themes: { light }, },})下面是主题对象上可覆盖键的完整列表： interface ParsedThemeItem { base: string lighten5: string lighten4: string lighten3: string lighten2: string lighten1: string darken1: string darken2: string darken3: string darken4: string [name: string]: string}禁用主题您可以使用值为 true 的 disable 属性来禁用主题功能 。这将禁止创建 Vuetify 样式表。 // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'const vuetify = new Vuetify({ theme: { disable: true },})选项Vuetify 在运行时为 SPA 生成主题样式，在服务器端为 SSR 应用程序生成主题样式。生成的样式将被放置在一个带有 id 的 vuetify-theme-stylesheet 的 标签中。 压缩minifyTheme 选项允许你提供一个自定义的 minify 实现。这有助于减少初始页面的大小，建议与 `options.meincessCache’ 搭配使用。在这个例子中，我们使用了 minify-css-string 包来减化 生成的主题样式。 // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'import minifyTheme from 'minify-css-string'Vue.use(Vuetify)export default new Vuetify({ theme: { options: { minifyTheme }, },})缓存你可以选择传递一个自定义的 themeCache实现。这可以让你跳过重新计算主题对象的需要。下面是一个使用 localStorage 属性的例子。 // src/plugins/vuetify.jsexport default new Vuetify({ theme: { options: { themeCache: { get: key => localStorage.getItem(key), set: (key, value) => localStorage.setItem(key, value), }, }, },})提供的 themeCache 对象 必须 包含一个 get 和 set 方法。使用它们来检索和设置 生成的 css 字符串。 缓存也可以通过 lru-cache 来完成。这对于 SSR（服务器端渲染）应用特别有用。 // src/plugins/vuetify.jsconst themeCache = new LRU({ max: 10, maxAge: 1000 * 60 * 60, // 1 hour})export default new Vuetify({ theme: { options: { themeCache, }, },})自定义属性启用 customProperties 也会为每个主题颜色生成一个 css 变量，你可以在组件的 块中使用。 Internet Explorer 中不支持自定义属性。可使用 Polyfills（有一些限制）：https://github.com/nuxodin/ie11CustomProperties, https://github.com/jhildenbiddle/css-vars-ponyfill. // src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'export default new Vuetify({ theme: { options: { customProperties: true, }, },}) .something { color: var(--v-primary-base); background-color: var(--v-accent-lighten2); }CSP Nonce启用了 script-src 或 style-src CSP 规则的页面可能需要为嵌入的样式标签指定一个 nonce。 Content-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ'Content-Security-Policy: style-src 'self' 'nonce-dQw4w9WgXcQ'// src/plugins/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'export default new Vuetify({ theme: { options: { cspNonce: 'dQw4w9WgXcQ', }, },})主题 ProviderVuetify 主题系统是通过 Vue 中的 provide 功能传播的。在某些情况下可能需要手动更改提供的主题（深色或浅色）。 props name dark type boolean default false description 将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。 name light type boolean default false description 为组件设置浅色主题。 name root type boolean default false description 使用当前的值 $vuetify.theme.dark ，而不是提供的值。 用例在这个例子中，底层卡继承自 $vuetify.mechanical.dark 的根目录。 template script I inherit dark from my parent One Two Three I inherit from the root $vuetify.theme.dark One Two Three export default { props: { attrs: { type: Object, default: () => ({}), }, }, data: vm => ({ initialDark: vm.$vuetify ? vm.$vuetify.theme.dark : false, }), beforeDestroy () { if (!this.$vuetify) return this.$vuetify.theme.dark = this.initialDark }, }
|
【本文地址】
今日新闻 |
推荐新闻 |